<template>
  <div class="content-field">
    <el-table
      :data="tableData"
      :key = "tableItemKey"
      style="width: 100%"
      border
      row-key="id"
      stripe>
      <el-table-column
        label="字段名称"
        align="center"
        width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.editStatus">{{scope.row.name}}</span>
          <el-input v-model="scope.row.name" v-if="!scope.row.editStatus"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="字段备注"
        align="left"
        width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.editStatus">{{scope.row.remark}}</span>
          <el-input v-model="scope.row.remark" v-if="!scope.row.editStatus"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="字段类型"
        align="center"
        width="110">
        <template slot-scope="scope">
          <!--value传对象省事-->
          <span v-if="scope.row.editStatus">{{scope.row.type}}</span>
          <v-select-dict :value.sync="scope.row" valueKey="type" dictType="tableFieldType" v-if="!scope.row.editStatus"></v-select-dict>
        </template>
      </el-table-column>
      <el-table-column
        label="字段长度"
        align="center"
        width="60">
        <template slot-scope="scope">
          <span v-if="scope.row.editStatus">{{scope.row.length}}</span>
          <el-input v-model="scope.row.length" v-if="!scope.row.editStatus"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="小数点"
        align="center"
        width="60">
        <template slot-scope="scope">
          <span v-if="scope.row.editStatus">{{scope.row.decimalLength}}</span>
          <el-input v-model="scope.row.decimalLength" v-if="!scope.row.editStatus"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="默认值"
        align="center"
        width="60">
        <template slot-scope="scope">
          <span v-if="scope.row.editStatus">{{scope.row.defaultValue}}</span>
          <el-input v-model="scope.row.defaultValue" v-if="!scope.row.editStatus"></el-input>
        </template>
      </el-table-column>

      <el-table-column
        label="主键"
        align="center"
        width="40">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.primaryStatusChecked" @change="onSelectChange(scope.row, scope.$index)" :disabled="scope.row.editStatus"/>
        </template>
      </el-table-column>

      <el-table-column
        label="唯一"
        align="center"
        width="40">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.uniqueStatusChecked" @change="onSelectChange(scope.row, scope.$index)" :disabled="scope.row.editStatus"/>
        </template>
      </el-table-column>

      <el-table-column
        label="非空"
        align="center"
        width="40">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.emptyStatusChecked" @change="onSelectChange(scope.row, scope.$index)" :disabled="scope.row.editStatus"/>
        </template>
      </el-table-column>

      <el-table-column
        label="排序"
        align="center"
        width="60px">
        <template slot-scope="scope">
          <span v-if="scope.row.editStatus">{{scope.row.seq}}</span>
          <el-input v-model="scope.row.seq" v-if="!scope.row.editStatus"></el-input>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="left"
        width="180">
        <template slot-scope="scope">
          <el-button @click="onEdit(scope.row,scope.$index)" type="text" ><d2-icon :name="scope.row.editIcon" style="font-size: 18px;"/></el-button>
          <el-button @click="onDelete(scope.row,scope.$index)" type="text" ><d2-icon name="trash" style="font-size: 18px;color:red"/></el-button>
          <el-button @click="onAdd(scope.row)" type="text" v-if="scope.row.showPlusIcon"><d2-icon  name="plus" style="font-size: 18px;"/></el-button>
          <el-tooltip class="item" effect="dark" content="从数据库表同步字段" placement="top-start">
            <el-button @click="onSyncFromTable(scope.row)" type="text" v-if="scope.row.showSyncIcon"><d2-icon  name="circle-o-notch" style="font-size: 18px;"/></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import api from '@/api'
import selectDict from '@/views/public/selectDict.vue'
import constant from '@/libs/util.constant'

export default {
  name: 'curd-entity-index',
  components: {
    'v-select-dict': selectDict
  },
  props: {
    id: {
      type: Number
    }
  },
  data () {
    return {
      tableData: [],
      tableItemKey: 1,
      pageData: {
        page: 1,
        size: 100,
        totalRows: 0
      },
      addForm: {
        canDelete: 0,
        defaultValue: '',
        emptyStatus: 0,
        id: null,
        length: null,
        name: '',
        primaryStatus: 0,
        relEntityId: 0,
        remark: '',
        type: '',
        uniqueStatus: 0,
        seq: 1,
        decimalLength: null

      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      var data = {}
      data.commonCondition = {
        conditions: [{
          value: this.id,
          name: 'relEntityId'
        }]
      }
      data.blockCode = 'sys_entity_search'
      var param = this.pageData
      api.sysCurd.sysFieldEntityList(data, param).then(res => {
        this.pageData.totalRows = res.totalRows
        this.tableData = res.content
        this.tableData.forEach((row, i) => {
          row.editStatus = true
          row.showPlusIcon = false
          row.showSyncIcon = false
          if (i === this.tableData.length - 1) {
            row.showPlusIcon = true
            row.showSyncIcon = true
          }
          row.primaryStatusChecked = row.primaryStatus === 1
          row.uniqueStatusChecked = row.uniqueStatus === 1
          row.emptyStatusChecked = row.emptyStatus === 1
          row.editIcon = 'edit'
        })
        if (this.tableData.length === 0) {
          this.onAdd()
        }
      })
    },
    onAdd () {
      var addRow = JSON.parse(JSON.stringify(this.addForm))
      addRow.primaryStatusChecked = addRow.primaryStatus === 1
      addRow.uniqueStatusChecked = addRow.uniqueStatus === 1
      addRow.emptyStatusChecked = addRow.emptyStatus === 1
      addRow.editIcon = 'check'
      addRow.editStatus = false
      addRow.showSyncIcon = true
      this.tableData.push(addRow)
      // this.tableItemKey = Math.random()
    },
    onEdit (row, index) {
      if (row.editStatus) {
        row.editStatus = false
        row.editIcon = 'check'
        // this.tableItemKey = Math.random()
        this.$set(this.tableData, index, row)
      } else {
        row.primaryStatus = row.primaryStatusChecked ? 1 : 0
        row.uniqueStatus = row.uniqueStatusChecked ? 1 : 0
        row.emptyStatus = row.emptyStatusChecked ? 1 : 0
        var param = row
        if (param.id === null) {
          param.relEntityId = this.id // 添加关联表id

          api.sysCurd.sysFieldEntityInsert(param).then(res => {
            this.$message({ type: 'info', message: '已添加,未同步表' })
            this.refresh()
          })
        } else {
          api.sysCurd.sysFieldEntityUpdate(param).then(res => {
            this.$message({ type: 'info', message: '已更新,未同步表' })
            this.refresh()
          })
        }

        // row.editStatus = true
        // row.editIcon = 'edit'
      }
    },
    onDelete (row, index) {
      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', constant.confirmMsg()).then(() => {
        if (row.id) {
          var param = [row.id]
          api.sysCurd.sysFieldEntityDeleteById(param).then(res => {
            this.$message({ type: 'info', message: '已更新' })
            this.refresh()
          })
        } else {
          this.tableData = this.tableData.filter((item, i) => {
            return i !== index
          })
          if (this.tableData.length === 0) {
            this.onAdd()
          }
        }
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    onSelectChange (row, index) {
      this.$set(this.tableData, index, row)
    },
    onSyncFromTable (row) {
      var param = { relEntityId: this.id }
      api.sysCurd.sysFieldEntitySync(param).then(res => {
        this.$message({ type: 'info', message: '已更新' })
        this.refresh()
      })
    },
    refresh () {
      this.getList()
    },
    refreshPageData () {
      this.refresh()
    }
  }
}
</script>

<style lang="scss" scope>
  .el-input-number {
    width: 100px
  }
  .content-field {
    margin-bottom: 20px
  }
</style>
